<!-- START OF FILE index.html -->

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chat with AI</title>
</head>
<body>
    <h1>Chat with AI</h1>
    <textarea id="userInput" rows="4" cols="50" placeholder="在这里输入你的消息..."></textarea><br>
    <button onclick="sendMessage()">发送</button>
    <h3>回复:</h3>
    <pre id="response" style="border: 1px solid #ccc; padding: 10px; min-height: 50px; background-color: #f9f9f9;"></pre>

    <script>
        async function sendMessage() {
            const userInput = document.getElementById('userInput').value;
            const responseElement = document.getElementById('response');
            
            if (!userInput) {
                alert('请输入消息!');
                return;
            }

            // 发送请求前显示“等待中”
            responseElement.textContent = '正在思考中...';

            try {
                // 使用相对路径！这会自动指向您部署的后端服务。
         // 从相对路径改回 Vercel 的绝对路径
const response = await fetch('https://my-vercel-project3.vercel.app/call-ai', { 
    method: 'POST',
    headers: {
        'Content-type': 'application/json'
    },
    body: JSON.stringify({ prompt: userInput })
});

                if (!response.ok) {
                    // 如果网络响应状态不是 2xx，则抛出错误
                    const errorData = await response.json();
                    throw new Error(errorData.error || `网络响应错误: ${response.statusText}`);
                }

                const data = await response.json();
                // 将 AI 的回复显示在页面上
                if (data.choices && data.choices[0]) {
                    responseElement.textContent = data.choices[0].message.content;
                } else {
                    responseElement.textContent = '未能获取有效的回复。';
                }

            } catch (error) {
                console.error('错误:', error);
                responseElement.textContent = `请求失败: ${error.message}`;
            }
        }
    </script>
</body>
</html>

<!-- END OF FILE index.html -->